/**
 * 购物车页面
 */

import './index.scss'
import Main from "../../layouts/Home";
import { Breadcrumb, InputNumber, Checkbox, Modal } from 'antd'
import { getCart, updata, updataAll, undataNum, deleteShop } from '../../api/cart';
import { getGoodsList } from '../../api/member';
import { useState, useEffect } from 'react';

export default () => {
    /**
     * 使用Modal
    */
    const { confirm } = Modal;
    /**
     * 总数量
    */
    const [nums, setNum] = useState(0)
    /**
     * 总价格
    */
    const [price, setPrice] = useState(0)
    /**
     * 列表数据
     **/
    const [cart, getCarts] = useState([])
    /**
     * 全选
    */
    const [checkedAll, setCheckedAll] = useState(false)
    /**
     *  获取cart列表数据
     **/
    const getCartList = async () => {
        try {
            const list = await getCart()
            getCarts(list)
            let arr = list.filter(item => item.selected)
            setNum(arr.length)
            let prices = 0
            arr.forEach(item => {
                prices += item.count * item.price
            })
            setPrice(prices)
            let flag = list.every(item => item.selected)
            setCheckedAll(flag)
        } catch (error) { }
    }
    /**
     * 更新状态
    */
    const check = async (id, flag) => {
        try {
            await updata(id, flag)
            getCartList()
        } catch (error) { }
    }
    /**
     * 全选更新
    */
    const checkAll = async (e) => {
        setCheckedAll(e)
        let arr = []
        cart.forEach(item => {
            arr.push(item.skuId)
        })
        await updataAll(arr, e)
        getCartList()
    }
    /**
     * 数量变化
    */
    const upNum = async (id, value) => {
        try {
            await undataNum(id, value)
            getCartList()
        } catch (error) { }
    }
    /**
     * 单个删除商品
    */
    const deleteShopList = async (id) => {
        try {
            let arr = []
            arr.push(id)
            console.log(arr);
            confirm({
                title: '您确定删除此商品吗？',
                onOk() {
                    deleteShop(arr)
                    getCartList()
                },
            });

        } catch (error) {

        }
    }

    /**
     * 删除全部商品
    */
    const delAll = async () => {
        try {
            let arr = cart.filter(item => item.selected)
            let arrs = []
            arr.forEach(item => arrs.push(item.skuId))
            confirm({
                title: '您确定删除全部商品吗？',
                onOk() {
                    deleteShop(arrs)
                    getCartList()
                },
            });
        } catch (error) { }
    }

    /**
     * 失效商品删除
    */
    const actual = async () => {
        try {
            confirm({
                title: '您确定删除失效商品吗？',
                onOk() {
                    deleteShop([])
                    getCartList()
                },
            });
        } catch (error) { }
    }

    useEffect(() => {
        getCartList()
    }, [])

    /**
     * 猜你喜欢的数据
     */
    const [list, setList] = useState([]);

    /**
     *获取猜你喜欢的数据
     */
    const goodsList = async () => {
        try {
            const data = await getGoodsList();
            setList(data);
        } catch (error) { }
    }
    useEffect(() => {
        goodsList()
    }, [])

    return (
        <Main>
            <div className='cart-wrap'>
                {/* 面包屑 */}
                <div className="Breadcrumb">
                    <Breadcrumb separator=">">
                        <Breadcrumb.Item>
                            <a>首页</a>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a>购物车</a>
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                {/* 购物车列表 */}
                <table>
                    <thead>
                        <tr>
                            <th><Checkbox checked={checkedAll} onChange={(e) => checkAll(e.target.checked)}></Checkbox>&ensp;全选</th>
                            <th>商品信息</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            cart.map(item => (
                                <tr key={item.skuId}>
                                    <td> <Checkbox checked={item.selected} onChange={(e) => check(item.skuId, e.target.checked)}></Checkbox></td>
                                    <td>
                                        <div className='info'>
                                            <img src={item.picture} />
                                            <p>
                                                <p className="name">{item.name}</p>
                                                <p className="desc">{item.attrsText}</p>
                                            </p>
                                        </div>
                                    </td>
                                    <td>￥{item.price}</td>
                                    <td> <InputNumber min={1} defaultValue={item.count} onChange={(value) => upNum(item.skuId, value)} ></InputNumber>  </td>
                                    <td style={{ color: 'red', fontWeight: 700 }}>￥{item.price * item.count}</td>
                                    <td>
                                        <p>移入收藏夹</p>
                                        <p style={{ color: "#8eba9a" }} onClick={() => deleteShopList(item.skuId)}>删除</p>
                                        <p>找相似</p>
                                    </td>
                                </tr>
                            ))
                        }
                    </tbody>
                </table>
                <div className='numPrice'>
                    <div className='left'>
                        <p><Checkbox checked={checkedAll} onChange={(e) => checkAll(e.target.checked)}></Checkbox>&ensp;全选</p>
                        <p onClick={() => delAll()}>删除商品</p>
                        <p>移入收藏夹</p>
                        <p onClick={() => actual()}>清空失效商品</p>
                    </div>
                    <div className='right'>
                        <p>共<span>{cart.length}</span>件商品，已选择<span>{nums}</span>件，商品合计: <span className='price'>￥{price}</span> </p>
                        <button>下单结算</button>
                    </div>
                </div>
            </div>
            {/* 猜你喜欢 */}
            <div className="goods_relevant">
                <div className="header">
                    <i className="icon"></i>
                    <span className="title">猜你喜欢</span>
                </div>
                <ul className="carousel_body">
                    <li className="carousel_item">
                        {list.map(item =>

                            <div className="slider" key={item.id}>
                                <a href="#/">
                                    <img src={item.picture} alt="" />
                                    <p className="name">{item.name}</p>
                                    <p className="price">￥{item.price}</p>
                                </a>
                            </div>
                        )}
                    </li>
                </ul>
            </div>
        </Main>
    )
}